<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="dialogVisibleClose"
      :class="{'mobile-el-dialog': showMobilePage}"
      class="normal-common-dialog-size update-dialog"
    >
      <Title title="选择类型" font-size="16px" style="margin-bottom: 8px" />
      <div class="update-dialog-main-container">
        <div class="update-dialog-main-item">
          <div class="tip">请选择订单需要更新的信息</div>
          <div>
            <el-checkbox-group v-model="checkList" class="radio-group" @change="checkChange">
              <el-checkbox v-for="item in updateSections" :key="item.value" :disabled="isReplace && item.value === 4" :label="item.value" class="info-checkbox"><span class="text-style">{{ item.label }}</span></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="update-dialog-main-item">
          <div class="tip" style="margin-bottom: 0;">请选择更新方式</div>
          <div class="select-radio">
            <div class="flex">
              <el-radio v-model="dialogVisibleType" :label="1" style="margin-right: 35px"><span class="text-style">仅更新值为空的信息</span></el-radio>
              <el-radio v-model="dialogVisibleType" :label="2" style="margin-right: 5px"><span class="text-style">全部覆盖</span></el-radio>
            </div>
            <div class="select-radio-child-select">
              <el-checkbox v-model="isAdd" :disabled="isAllCover" @change="handelIsAdd"><span class="text-style">设为增加（只限执行人(资源侧)、协作部门）</span></el-checkbox>
              <el-checkbox v-model="isReplace" :disabled="isAllCover" @change="handelIsReplace"><span class="text-style">替换执行人(资源侧)中的所有人员</span></el-checkbox>
            </div>
          </div>
        </div>
        <div v-if="dialogType === 'list'" class="update-dialog-main-item">
          <div class="tip">请选择不更新的订单</div>
          <el-checkbox-group v-model="noUpdateList" class="radio-group">
            <el-checkbox v-for="(item, index) in noUpdateSections" :key="item.value" :label="item.value" :style="index ===1?{minWidth: '40%'}:''" class="info-checkbox"><span class="text-style">{{ item.label }}</span></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
        <el-button :loading="loading" class="search-btn-style ok" style="padding: 7px 10px;" type="primary" @click="update()">确定</el-button>
        <el-button class="cancel-btn-style" style="width: 80px" @click="dialogVisibleClose()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { batchUpdate, getOrderInfo } from '@/api/order';
import ElMessage from '@/utils/message';
import Title from '@/components/Title';
import { mapState } from 'vuex';

export default {
  components: { Title },
  props: {
    dialogType: {
      type: String,
      default: 'list'
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisibleType: 1,
      ids: '',
      loading: false,
      noUpdateList: [1, 2, 3],
      isAdd: false,
      isReplace: false,
      checkList: [2, 4, 5, 6, 7, 8, 9, 10],
      cacheCheckList: [2, 4, 5, 6, 7, 8, 9, 10],
      updateSections: [
        // { label: '所属部门', value: 1 }, v2.9.2 删除
        { label: '账号ID', value: 2 },
        // { label: '账号归属', value: 3 },  v2.9.2 删除
        { label: '执行人(资源侧)', value: 4 },
        { label: '协作部门', value: 5 },
        { label: '系统ID', value: 6 },
        { label: '运营模式', value: 7 },
        { label: '合作运营方', value: 8 },
        { label: '所有人员', value: 9 },
        { label: '所属经营体', value: 10 },
        { label: '标签', value: 11 }
      ],
      noUpdateSections: [
        { label: '已封账订单', value: 1 },
        { label: '供应商结算(结算中/已完成)', value: 2 },
        { label: '客户结算(结算中/已完成)', value: 3 }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAllCover() {
      return this.dialogVisibleType !== 2;
    }
  },
  watch: {
    dialogVisibleType: function(newV) {
      if (newV !== 2) { // 不是全部覆盖
        this.isAdd = false;
        this.isReplace = false;
      }
    }
  },
  methods: {
    checkChange(val) {
      if (val.length === 0) {
        this.$message({
          type: 'warning',
          message: '请至少选择一项需要更新的信息'
        });
        this.checkList = this.cacheCheckList;
      } else {
        this.cacheCheckList = val;
      }
    },
    dialogVisibleClose() {
      this.dialogVisibleType = 1;
      this.dialogVisible = false;
      this.checkList = [2, 4, 5, 6, 7, 8];
      this.cacheCheckList = [2, 4, 5, 6, 7, 8];
      this.noUpdateList = [1, 2, 3];
      this.isAdd = false;
    },
    dialogVisibleShow(ids) {
      this.dialogVisibleType = 1;
      this.dialogVisible = true;
      this.ids = ids;
    },
    handelIsReplace() {
      if (!this.checkList.includes(4)) this.checkList.push(4);
      if (this.isReplace) {
        this.isAdd = false;
      }
    },
    handelIsAdd() {
      if (this.isAdd) {
        this.isReplace = false;
      }
    },
    update() {
      if (!this.ids || this.ids === '') {
        ElMessage.warning('请选择要更新的订单');
        return;
      }
      if (this.loading) return;
      // type 1:仅空值替换 2:全覆盖替换
      const params = {
        ids: this.ids,
        type: this.dialogVisibleType,
        updateSections: this.checkList,
        noUpdateSections: this.noUpdateList,
        isAdd: this.isAdd,
        isReplace: this.isReplace
      };
      this.loading = true;
      batchUpdate(params).then(res => {
        this.dialogVisible = false;
        if (res.code === 200) {
          this.$message.success('所选订单信息已更为最新');
          this.$emit('clearSelectionFun');
          const multi = typeof this.ids === 'string' ? this.ids.split(',').length > 1 : false;
          if (this.dialogType === 'detail' && !multi) {
            this.getOrder(this.ids);
          } else {
            this.$emit('updateList');
          }
        }
        this.loading = false;
      }).catch(err => {
        this.dialogVisible = false;
        this.loading = false;
        console.error(err);
      });
    },
    getOrder(orderIds) {
      if (!orderIds) return;
      return getOrderInfo(orderIds).then(({ data }) => {
        const orderInfo = data.orderInfo;
        let cooperationDepartmentId = [];
        if (orderInfo.cooperationDepartment) {
          cooperationDepartmentId = orderInfo.cooperationDepartment.map(i => i.id);
        }
        // v2.9.2 删除所属部门和账号归属的更新，新增系统ID和运营模式
        this.$emit('freshData', {
          // accountBelong: orderInfo.accountBelong,
          // attributionMatrix: orderInfo.attributionMatrix,
          // attributionMatrixName: orderInfo.attributionMatrixName,
          accountOperationList: orderInfo.accountOperationList,
          resourceAttributionMatrix: orderInfo.resourceAttributionMatrix,
          resourceAttributionMatrixId: orderInfo.resourceAttributionMatrixId,
          cooperationDepartment: cooperationDepartmentId, // 协作部门
          resourceCode: orderInfo.resourceCode, // 账号ID
          // orderOperator: orderInfo.orderOperator, // 执行人
          orderResourceOperator: orderInfo.orderResourceOperator, // 执行人(资源侧)
          systemId: orderInfo.resourceId, // 系统ID
          resourceId: orderInfo.resourceId, // 系统ID
          operateMode: orderInfo.operateMode, // 运营模式
          cooperation: orderInfo.cooperation, // 合作运营方 v2.9.3.1新增
          supplierType: orderInfo.supplierType, // 合作运营方 v2.9.3.1新增
          tag: orderInfo.tag // 标签
        });
      }).catch(err => {
        console.error(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.update-dialog{
  .tip{
    line-height: 1.5;
    margin-bottom: 8px;
    color: #999999;
    font-size: 12px;
  }
  &::v-deep {
    .el-dialog__body{
      padding-bottom: 8px !important;
      .el-checkbox__label,.el-radio__label {
        padding-left: 6px;
      }
      .el-radio,.el-checkbox {
        line-height: 20px;
      }
    }
  }
  .radio-group{
    display: flex;
    flex-wrap:wrap;
    &::v-deep {
      .el-checkbox {
        margin-right: 0px;
      }
    }
  }
  .info-checkbox {
    min-width: 20%;
    margin-bottom: 24px;
  }
}
.update-dialog-main-container {
  padding-left: 10px;
}
.text-style {
  font-size: 14px;
  text-align: left;
  color: #333333;
}
.select-radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  .flex {
    flex:1;
    display: flex;
    align-items: center;
  }
  .select-radio-child-select {
    display: flex;
    align-items: center;
    height: 40px;
    background: #f9f9f9;
    border-radius: 2px;
    padding: 0 12px;
  }
}
.mobile-el-dialog {
  .select-radio {
    flex-wrap: wrap;
    .select-radio-child-select {
      flex-wrap: wrap;
      width: 100%;
      margin-top: 12px;
    }
  }
  .radio-group {
    ::v-deep {
      .el-checkbox {
        margin-right: 6px !important;
      }
    }
  }
}
</style>
